<!-- 预约日期组件 -->
<template>
  <view class="date-container">
    <view class="day-container flex-sb">
      <view class="day flex-col flex-cc" v-for="item in dateList" :key="item.id" :class="time.dayId===item.id?'active':''">
        <span>{{item.dayOfWeek}}</span>
        <span @click="time.dayId = item.id">{{getDay(item.day)}}</span>
      </view>
    </view>
    <view class="time-container">
      <view class="time-item" :class="`${time.timeId === item.id ? 'active' : ''} ${!index&&isDisabled ? 'view-disabled' : ''}`" v-for="item,index in timeList" :key="item.id" @click="time.timeId = item.id">
        <span>{{item.name}}{{item.time}}</span>
        <span>{{isProfessor?'人数':'剩余'}}：{{!index&&isDisabled?0:item.count}}</span>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * lf-date v1.0.0
 * @description 预约日期组件
 * @property {Array} timeList 时间段的list
 */
export default {
  name: "date",
  props: {
    timeList: {
      type: Array,
      default: () => [{
        id: 1,
        time: '09:00-12:00',
        name: '上午',
        count: 0
      }, {
        id: 2,
        time: '13:00-18:00',
        name: '下午',
        count: 0
      }]
    },
    isProfessor: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dateList: [],
      time: {
        dayId: 0,
        timeId: 0,
      },
      date: new Date(),
      dateInfo: {},
      isDisabled: false
    };
  },
  async created () {
    this.dateList = await this.getDate()
    this.time = {
      dayId: 1,
      timeId: 1,
    }
    // 判断当前时间是上午还是下午
    if (this.date.getHours() >= 12) {
      this.time.timeId = 2
    }
  },
  // 监听值变化
  watch: {
    time: {
      handler (newVal) {
        // 将id转成对应的日期和时间
        const day = this.dateList.find(item => item.id === newVal.dayId)
        const time = this.timeList.find(item => item.id === newVal.timeId)
        this.dateInfo = {
          date: day.day,
          time: time.time,
          timeId: time.id
        }
        // 判断是不是超过今天的时间段，是就跳到后面的时间段
        if (newVal.dayId == 1 && this.date.getHours() >= 12) {
          this.isDisabled = true
          this.time.timeId = 2
        } else {
          this.isDisabled = false
        }
        // 触发父组件的change事件
        this.$emit('change', this.dateInfo)
      },
      deep: true,
    }
  },
  methods: {
    getDate () {
      let date = new Date();
      // 判断当前时间是不是超过18:00，超过就从明天开始
      if (date.getHours() >= 18) {
        date.setDate(date.getDate() + 1);
      }
      let arr = [];
      for (let i = 0; i < 7; i++) {
        let now = new Date(date.getTime() + 24 * 60 * 60 * 1000 * i);
        let day = now.getFullYear() + '-' + this.formatNumber(now.getMonth() + 1) + '-' + this.formatNumber(now.getDate());
        let dayOfWeek = this.getDayOfWeek(now.getDay());
        let res = {
          id: i + 1,
          day,
          dayOfWeek
        }
        // 判断现在的时间是不是超过时间段，超过所有时间段就去掉今天
        if (i == 0 && date.getHours() >= 12) {
          this.isDisabled = true
        }
        arr.push(res);
      }

      console.log("🚀 ~ file: date.vue:104 ~ getDate ~ arr:", arr)
      return arr;
    },
    formatNumber (num) {
      return num < 10 ? '0' + num : num;
    },
    getDayOfWeek (dayIndex) {
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return days[dayIndex];
    },
    getDay (date) {
      return date.split('-')[1] + '-' + date.split('-')[2]
    }
  }
}
</script>

<style lang="scss">
.day-container {
  padding: 10px 0 20px 0;
  display: flex;
  overflow: auto;
  overflow-x: auto;
  white-space: nowrap;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}

.date-container {
  padding: 15px 10px;
  font-size: 10px;

  .time-container {
    display: flex;
    flex-wrap: wrap;

    .time-item {
      flex: 1;
      padding: 6px 0px;
      margin-right: 10px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 24px;
      border: 1px solid #dacfb9;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.day {
  border: 1px solid #dacfb9;
  border-radius: 4px;
  margin-right: 6px;
  text-align: center;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  &:last-child {
    margin-right: 0px;
  }
}

.active {
  background-color: #d7ae3c;
  color: #fff;
}
</style>